<template>
	<swiper class="swiper-card" :style="cardHeight" @tap.stop="">
		<swiper-item v-for="(item,index) in marksData" :key="item.id">
			<view class="card">
				<view class="img" v-if="!isNull(item.img)">
					<image class="image" mode="aspectFill" :src="item.img" @tap="previewImg(index)"></image>
					<icon class="iconfont icon-shanchu del" v-if="cardFlag == 'mark'" @tap="delPhoto('tmp','')"></icon>
					<icon class="iconfont icon-shanchu del-tmp" v-if="cardFlag == 'marker'"
						@tap="delPhoto('',item.recId)"></icon>
				</view>
				<view class="btn-photo" v-if="isNull(item.img) && cardFlag == 'mark'">
					<icon class="iconfont icon-zhaoxiangji" @tap="takePhoto"></icon>
				</view>
				<view class="img" v-if="isNull(item.img) && cardFlag.indexOf('marker')>=0">
					<image class="image" src="/static/imgs/marker.png" style="width: 128px;height: 128px;"></image>
				</view>
				<view class="info">
					<text style="margin-bottom: 5px;">{{item.title}}</text>
					<text class="tip">{{item.address}}</text>
					<text class="tip">{{item.markTime}}</text>
				</view>
				<button class="btn btn-main" v-if="cardFlag == 'mark'" @tap="markAction('create','')">确认打卡</button>
				<button class="btn" type="warn" v-if="cardFlag == 'marker'" @tap="markAction('del',item.recId)">删除这个打卡记录</button>
				<text v-if="marksData.length > 1" class="tip-bottom">第{{index+ 1}}/{{marksData.length}}记录，左右滑动查看</text>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	import {onMounted,ref} from "vue"
	import request from "../../util/request.js"
	import util from "../../util/util.js"
	import userInfo from "../../hooks/userInfo.js"
	import useWxImg from "../../hooks/useWxImg.js"
	export default {
		name: "mardercard",
		props: ["data"],
		setup(props, ctx) {
			onMounted(() => {
				if (props.data.flag == 'marker-readonly') cardHeight.value = 'height: 390px;'
				cardDataLoad(props.data.markers, props.data.flag)
			})
			let user = userInfo()
			let marksData = ref([])
			let cardFlag = ref()
			let cardHeight = ref('height: 420px;')
			// 加载markercard数据
			function cardDataLoad(markers, flag) {
				cardFlag.value = flag
				let mData = []
				if (flag == 'mark') {
					mData.push(markers)
				} else if (flag.indexOf('marker')>=0) {
					mData = markers
				}
				for(let i in mData) {
					mData[i].recId = mData[i]._id
					mData[i].markTime = util.formatGmt(mData[i].markTime)
					mData[i].img = mData[i].imgs && mData[i].imgs[0] ? mData[i].imgs[0].img : ''
				}
				marksData.value = mData
			}
		
		// 打卡拍照
		function takePhoto() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], // 'original', 'compressed' 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], // 'album','camera' 相册、使用相机
				success: function(res) {
					// console.log(res)
					let size = res.tempFiles[0].size
					if (size > 1024000) {
						uni.showToast({
							title: '图片大小不能超过1MB',
							icon: 'none'
						})
					} else {
						marksData.value[0].img = res.tempFilePaths[0]
					}
				}
			})
		}
		// 图片预览
		function previewImg(index) {
			let _current = 1
			let _urls = []
			_urls.push(marksData.value[index].img)
			uni.previewImage({
				current: _current,
				urls: _urls,
				loop: true,
			})
		}
		// 删除图片
		function delPhoto(f, recId) {
			let _content = f == 'tmp' ? '删除后不可恢复' : '删除后不可再此添加照片'
			uni.showModal({
				title: '是否删除照片',
				content: '删除后不可恢复',
				confirmText: '删除',
				confirmColor: 'rgb(245,108,108)',
				success: async function(res) {
					if (res.confirm) {
						if (f == 'tmp') {
							marksData.value[0].img = ''
						} else {
							let p = {}
							p.openId = user.openId
							p.recId = recId
							p.flag = 'HIDE_IMG'
							let r = await request.setMark(p)
							if (r.code == 10000) {
								let _marks = marksData.value
								for (let i in _marks) {
									if (_marks[i].recId == p.recId) {
										_marks[i].img = ''
										_marks[i].imgs = []
									}
								}
								marksData.value = _marks
								p.popUpAction = 'del-img'
								ctx.emit('action', p)
							}
						}
					}
				}
			})
		}
		// 打卡记录创建及删除
		async function markAction(f,recId) {
			if (f == 'create') {
				let m = marksData.value[0]
				let p = {}
				p.openId = user.openId
				p.lat = m.location.lat
				p.lng = m.location.lng
				p.title = m.title
				p.address = m.address
				p.imgs = []
				let markImg = ''
				if (!util.isNull(m.img)) markImg = await useWxImg(m.img)
				if (markImg == '' || typeof(markImg) == 'string') {
					p.imgs.push({
						img: markImg
					})
					let r = await request.createMark(p)
					if (r.code == 10000) {
						uni.showToast({
							title: '打卡成功',
						})
						let _data = r.data[0]
						_data.popUpAction = 'close'
						ctx.emit('action', _data)
					}
				} else {
					let _title = '图片转换错误：' + markImg.errMsg
					uni.showToast({
						title: _title,
						icon: 'none',
						duration: 2500
					})
				}
			}
			if (f == 'del') {
				uni.showModal({
					title: '是否确认删除此记录',
					content: '删除后不可恢复',
					confirmText: '删除',
					confirmColor: 'rgb(245,108,108)',
					success: async function(res) {
						if (res.confirm) {
							let p = {}
							p.openId = user.openId
							p.recId = recId
							p.flag = 'HIDE_MARK'
							let r = await request.setMark(p)
							if (r.code == 10000) {
								let _marks = marksData.value
								for (let i in _marks) {
									if (p.recId == _marks[i].recId) {
										_marks.splice(i, 1)
									}
								}
								marksData.value = _marks
								p.popUpAction = _marks.length > 0 ? '':'close'
								ctx.emit('action', p)
							}
						}
					}
				})
			}
		}


		function isNull(v) {
			return util.isNull(v)
		}
		return {
			marksData,
			cardFlag,
			cardHeight,
			takePhoto,
			delPhoto,
			previewImg,
			markAction,
			isNull
		}
	}
	}
</script>

<style lang="scss">
	.swiper-card {
		width: 80%;
		height: 420px;
		margin: 150px auto;
		background-color: #fff;
		box-shadow: 1px 1px 10px #ccc;
		border-radius: 5px;

		.btn {
			width: 100%;
		}

		.card {
			@extend %flex-view;
			width: 100%;
			padding: 15px;

			.btn-photo {
				@extend %flex-view;
				width: 100%;
				height: 240px;

				.iconfont {
					border: 1px solid #eee;
					font-size: 48px;
					padding: 45px;
					color: #eee;
					text-shadow: 1px 1px 1px #666;
				}
			}

			.img {
				@extend %flex-view;
				position: relative;
				width: 100%;
				height: 240px;

				.iconfont {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 32px;
					text-shadow: 1px 1px 1px #999;
					color: $uni-color-error;
					background-color: rgba(160, 160, 160, 0.75);
					padding: 2px;
					border-radius: 5px;
				}

				.image {
					width: 100%;
					height: 240px;
				}
			}

			.info {
				@extend %flex-view;
				margin: 8px 15px;
			}

			.btn-main {
				width: 100%;
				background-color: $color-main;
			}

			.tip-bottom {
				font-size: 14px;
				color: #999;
				padding-top: 2px;
			}
		}

		.tip {
			font-size: 12px;
			color: #999;
		}
	}
</style>
